<template>
    <h2 class="text-center mt20">{{ $t('home.otc') }}</h2>

    <div class="otc-box flex-column-start-start">
        <div
            v-for="(item, index) in storeList"
            :key="`otc-item-${index}`"
            class="otc-item"
        >
            <div class="flex-start-center">
                <img
                    :src="item.image"
                    :alt="item.name"
                >
            </div>
            <div class="fz24 mt20">
                {{ item.name }}
            </div>
            <div class="mt20">
                <div class="flex-start-start">
                    <div class="otc-icon flex-start-center">
                        <el-icon :size="20">
                            <Location />
                        </el-icon>
                    </div>
                    <div class="fz14">
                        {{ item.address }}
                    </div>
                </div>
                <div class="flex-start-center mt15">
                    <div class="otc-icon flex-start-center">
                        <el-icon :size="20">
                            <Phone />
                        </el-icon>
                    </div>
                    <div class="fz14">
                        <a
                            :href="`tel:${item.telephone}`"
                            class="text-main"
                        >
                            {{ item.telephone }}
                        </a>
                    </div>
                </div>
                <div class="flex-start-center mt15">
                    <div class="otc-icon flex-start-center">
                        <el-icon :size="20">
                            <ChromeFilled />
                        </el-icon>
                    </div>
                    <div class="fz14">
                        <a
                            :href="item.website"
                            class="text-main"
                            target="_blank"
                        >
                            {{ item.website }}
                        </a>
                    </div>
                </div>
                <div
                    v-if="item.price"
                    class="flex-start-center mt15"
                >
                    <div class="otc-icon flex-start-center">
                        <el-icon :size="20">
                            <i class="diff-icon-bitcoin-buy" />
                        </el-icon>
                    </div>
                    <div class="fz14">
                        <span class="text-error">Buy: {{ item?.price?.buyPrice }}</span>
                        <span class="text-success ml10">Sell: {{ item?.price?.sellPrice }}</span>
                    </div>
                </div>
                <div class="flex-start-start mt15">
                    <div class="otc-icon flex-start-start">
                        <el-icon :size="20">
                            <Clock />
                        </el-icon>
                    </div>
                    <div class="otc-time fz14">
                        <div class="otc-time-state flex-start-center">
                            <span>
                                {{ $t('home.opening') }}
                            </span>
                            <span :class="item?.time?.openTime !== 'Closed' ? 'text-success' : 'text-error'">
                                {{ item?.time?.openTime }}
                            </span>
                            <el-icon
                                class="ml5"
                                @click="show(item)"
                            >
                                <ArrowUp v-if="item.showTime" />
                                <ArrowDown v-else />
                            </el-icon>
                        </div>
                        <div
                            v-if="item.showTime"
                            class="otc-time-list"
                        >
                            <div
                                v-for="(time, j) in item.openTime"
                                :key="`otc-item-${index}-${j}`"
                                class="otc-time-item flex-start-center"
                                :class="time.weekName === now && (time.openTime === 'Closed' ? 'text-error' : 'text-success')"
                            >
                                <div>
                                    {{ time.weekName }}
                                </div>
                                <div>
                                    {{ time.openTime }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import moment from 'moment';
import {
    Location, Phone, ChromeFilled, Clock, ArrowDown, ArrowUp,
} from '@element-plus/icons-vue';
import { getStoreList } from '@/utils/api';

const now = moment().format('dddd');
const storeList = ref([]);

const getStore = async () => {
    const res = await getStoreList();
    const { code, data } = res;
    if (code === 200 && data) {
        storeList.value = data.map(item => ({
            ...item,
            time: item.openTime.find(i => i.weekName === now),
            showTime: false,
        }));
    }
};

const show = (row) => {
    row.showTime = !row.showTime;
};

onMounted(async () => {
    await getStore();
});
</script>

<style lang="scss" scoped>
.otc-box {
    padding: 20px;
    gap: 20px;

    .otc-item {
        padding: 20px;
        box-shadow: 0 0 5px #eee;
        border-radius: 6px;

        img {
            width: 100%;
        }

        .otc-icon {
            margin-right: 10px;

            .el-icon {
                color: #1a73e8;
            }
        }

        .otc-time {
            .otc-time-state {
                height: 20px;

                span {
                    &:first-child {
                        width: 100px;
                    }
                }
            }

            .otc-time-list {
                .otc-time-item {
                    margin-top: 15px;

                    & > div {
                        &:first-child {
                            width: 100px;
                        }
                    }
                }
            }
        }
    }
}
</style>
